//蓝色主题，element-ui的变量
body[data-theme='theme-blue'] {
	// 布局
	--el-header-height: 60px; // Header 的高度
	--el-aside-width: 64px; // Aside 的宽度
	--el-aside-mini-width: 48px; // Aside mini 模式下的宽度
	--el-aside-collapsed-width: 0; // Aside 折叠时的宽度

	// 字体
	--el-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; // 字体
	--el-font-size-base: 14px; // 基本字号
	--el-font-size-small: 12px; // 小字号
	--el-font-size-mini: 10px; // 迷你字号

	// 基础颜色
	--el-color-white: #ffffff;
	--el-color-black: #000000;
	--el-color-primary: #409eff; // 主色
	--el-color-primary-light: #a5d8ff; // 主色亮色
	--el-color-primary-lighter: #e6f7ff; // 主色更亮色
	--el-color-primary-dark: #0062cc; // 主色暗色
	--el-color-primary-darker: #003a8c; // 主色更暗色
	--el-color-success: #67c23a; // 成功色
	--el-color-warning: #e6a23c; // 警告色
	--el-color-danger: #f56c6c; // 危险色
	--el-color-info: #909399; // 信息色
	--el-color-background: #f5f7fa; /* 背景颜色 */

	// 文本颜色
	--el-color-text-base: #303133; // 基础文本色
	--el-color-text-primary: #606266; // 主文本色
	--el-color-text-secondary: #909399; // 次文本色
	--el-color-text-placeholder: #c0c4cc; // 占位文本色

	--el-text-color-regular: #606266; // 基础文本色

	// 边框颜色
	--el-color-border-base: #dcdfe6; // 基础边框颜色
	--el-color-border-primary: --el-color-primary; // 主要边框颜色
	--el-color-border-success: --el-color-success; // 成功边框颜色
	--el-color-border-warning: --el-color-warning; // 警告边框颜色
	--el-color-border-danger: --el-color-danger; // 危险边框颜色
	--el-color-border-info: --el-color-info; // 信息边框颜色

	--el-color-gray-100: #f7f7f7; // 用于背景、边框等
	--el-color-gray-200: #ebebeb; // 用于分割线等
	--el-color-gray-300: #c9c9c9; // 用于文本、图标等
	--el-color-gray-400: #a7a7a7;
	--el-color-gray-500: #8c8c8c;
	--el-color-gray-600: #707070;
	--el-color-gray-700: #4d4d4d;
	--el-color-gray-800: #4d4d4d;

	// 尺寸
	--el-border-radius-base: 4px; // 边框圆角半径
	--el-padding-base: 16px; // 基础内边距
	--el-padding-small: 8px; // 小内边距
	--el-padding-mini: 4px; // 迷你内边距

	// 表格
	// Table
	--el-table-header-color: #303133; // 表头文本颜色
	--el-table-header-bg: #f5f7fa; // 表头背景色
	--el-table-header-border-color: #dcdee2; // 表头边框颜色
	--el-table-row-hover-bg: #f9fafc; // 鼠标悬停行背景色
	--el-table-row-hover-color: inherit; // 鼠标悬停行文本颜色
	--el-table-row-hover-bg-highlight: #ebf1f6; // 鼠标悬停行高亮背景色
	--el-table-row-selected-bg: #e6f7ff; // 选中行背景色
	--el-table-row-selected-color: inherit; // 选中行文本颜色
	--el-table-row-active-bg: #f5f7fa; // 活动行背景色
	--el-table-row-active-color: inherit; // 活动行文本颜色
	--el-table-border-color: #dcdee2; // 表格边框颜色
	--el-table-cell-padding: 12px 16px; // 单元格内边距
	--el-table-font-size: 14px; // 表格字体大小
	--el-table-line-height: 1.5; // 表格行高
	--el-table-row-height: 48px; // 表格行高度
	--el-table-min-width: 100%; // 表格最小宽度
	// --el-table-selected-row-hover-bg: --el-table-row-selected-bg ; // 选中行悬停背景色
	// --el-table-empty-text-color: --el-text-color-secondary ; // 空表格文本颜色
	// --el-table-expand-color: #303133 ; // 展开图标颜色
	// --el-table-expand-hover-bg: #f9fafc ; // 展开图标悬停背景色
	// --el-table-border-radius: --el-border-radius-base ; // 表格边框圆角
	// --el-table-stripe-bg: #f5f7fa ; // 条纹背景颜色
	// --el-table-resize-handle-size: 16px ; // 表格可调整大小的句柄大小
	// --el-table-resize-handle-color: #dcdee2 ; // 表格可调整大小的句柄颜色
	// --el-table-resize-handle-hover-color: #303133 ; // 表格可调整大小的句柄悬停颜色
	// --el-table-font-weight: 400 ; // 表格字体粗细
	// --el-table-header-cell-border-width: 1px ; // 表头单元格边框宽度
	// --el-table-row-cell-border-width: 1px ; // 表格行单元格

	// 表单
	--el-form-item-label-color: --el-color-gray-700; // 表单项标签文字颜色
	--el-form-item-label-margin-right: 16px; // 表单项标签右侧间距
	--el-form-item-label-padding-top: 8px; // 表单项标签顶部内边距
	--el-form-item-label-font-size: 14px; // 表单项标签字体大小
	--el-form-item-label-font-weight: 500; // 表单项标签字体粗细
	// --el-form-item-required-color: --el-color-danger; // 必填项标记颜色
	// --el-form-item-content-margin-left: --el-form-item-label-margin-right; // 表单项内容左侧间距
	// --el-form-label-color: --el-form-item-label-color; // 表单标签文字颜色
	// --el-form-label-margin-right: --el-form-item-label-margin-right; // 表单标签右侧间距
	// --el-form-label-padding-top: --el-form-item-label-padding-top; // 表单标签顶部内边距
	// --el-form-label-font-size: --el-form-item-label-font-size; // 表单标签字体大小
	// --el-form-label-font-weight: --el-form-item-label-font-weight; // 表单标签字体粗细
	// --el-form-required-color: --el-form-item-required-color; // 必填项标记颜色
	// --el-form-item-margin-bottom: 24px; // 表单项底部间距
	// --el-form-item-font-size: 14px; // 表单项字体大小
	// --el-input-height-base: 36px; // 基础输入框高度
	// --el-input-height-lg: 40px; // 大号输入框高度
	// --el-input-height-sm: 32px; // 小号输入框高度

	// 下拉框
	--el-select-arrow-color: --el-color-gray-400; // 下拉箭头颜色
	--el-select-clear-color: --el-color-gray-400; // 清空按钮颜色
	--el-select-clear-hover-color: --el-color-gray-500; // 清空按钮悬停颜色
	--el-select-clear-disabled-color: --el-color-gray-300; // 禁用状态下清空按钮颜色

	// 日历
	--el-calendar-cell-height: 40px; // 日历单元格高度
	--el-calendar-cell-width: 40px; // 日历单元格宽度
	--el-calendar-color: --el-color-gray-800; // 日历文本颜色
	--el-calendar-hover-color: --el-color-primary; // 日历鼠标悬停颜色
	--el-calendar-range-color: --el-color-primary; // 日历范围选择颜色
	--el-calendar-header-color: --el-color-gray-700; // 日历头部文本颜色
	--el-calendar-header-font-size: --el-font-size-base; // 日历头部字体大小
	--el-calendar-item-color: --el-color-gray-700; // 日历单元格文字颜色
	--el-calendar-item-font-size: --el-font-size-base; // 日历单元格字体大小
	--el-calendar-item-font-weight: 400; // 日历单元格字体粗细

	// 分页
	--el-pagination-item-color: --el-color-gray-700; // 分页项文字颜色
	--el-pagination-item-hover-color: --el-color-primary; // 分页项鼠标悬停颜色
	--el-pagination-item-disabled-color: --el-color-gray-400; // 分页项禁用状态颜色
	--el-pagination-item-active-color: --el-color-primary; // 分页项激活状态颜色
	--el-pagination-jump-disabled-opacity: 0.3; // 分页跳转禁用状态透明度

	// 弹出框
	--el-popover-max-width: 320px; // 弹出框最大宽度
	--el-popover-arrow-size: 6px; // 弹出框箭头大小
	// --el-popover-arrow-color: --el-background-color-light; // 弹出框箭头颜色

	// 滑块
	--el-slider-bar-height: 4px; // 滑块轨道高度
	--el-slider-bar-background-color: --el-color-gray-400; // 滑块轨道背景色
	--el-slider-button-width: 14px; // 滑块按钮宽度
	--el-slider-button-height: 14px; // 滑块按钮高度
	--el-slider-button-border-radius: 50%; // 滑块按钮边框半径
	// --el-slider-button-box-shadow: 0 2px 2px rgba(--el-color-black, 0.2); // 滑块按钮阴影
	--el-slider-button-color: --el-color-white; // 滑块按钮颜色
	--el-slider-button-hover-color: --el-color-white; // 滑块按钮悬停颜色
	--el-slider-button-disabled-opacity: 0.5; // 滑块按钮禁用状态透明度
	--el-slider-button-focus-box-shadow: 0 0 2px --el-color-primary; // 滑块按钮聚焦状态阴影

	// 开关
	--el-switch-width: 42px; // 开关宽度
	--el-switch-height: 22px; // 开关高度
	--el-switch-button-width: 16px; // 开关按钮宽度
	--el-switch-button-height: 16px; // 开关按钮高度
	--el-switch-border-width: 1px; // 开关边框宽度
	--el-switch-border-color: --el-color-gray-400; // 开关边框颜色
	--el-switch-background-color: --el-color-white; // 开关背景色
	--el-switch-button-background-color: --el-color-gray-400; // 开关按钮背景色
	--el-switch-disabled-opacity: 0.4; // 开关禁用状态透明度
	--el-switch-focus-box-shadow: 0 0 2px --el-color-primary; // 开关聚焦状态阴影

	// 步骤条
	--el-steps-line-height: 24px; // 步骤条行高
	--el-steps-font-size: --el-font-size-base; // 步骤条字体大小
	--el-steps-icon-font-size: 12px; // 步骤条图标字体大小
	--el-steps-icon-size: 16px; // 步骤条图标大小
	--el-steps-horizontal-line-height: 2px; // 步骤条横向线高度
	--el-steps-horizontal-line-color: --el-color-gray-400; // 步骤条横向线颜色
	--el-steps-vertical-line-width: 2px; // 步骤条纵向线宽度

	// 滚动条
	--el-scrollbar-width: 8px; // 滚动条宽度
	--el-scrollbar-height: 8px; // 滚动条高度
	--el-scrollbar-background-color: rgba(--el-color-gray-400, 0.2); // 滚动条背景色
	--el-scrollbar-thumb-background-color: rgba(--el-color-gray-400, 0.6); // 滚动条滑块背景色
	--el-scrollbar-thumb-hover-background-color: rgba(--el-color-gray-400, 0.8); // 滚动条滑块悬停背景色
	--el-scrollbar-thumb-active-background-color: --el-color-gray-400; // 滚动条滑块激活背景色
	--el-scrollbar-thumb-border-radius: --el-border-radius-base; // 滚动条滑块边框半径
	// --el-scrollbar-thumb-box-shadow: 0 0 1px rgba(--el-color-black, 0.6); // 滚动条滑块阴影

	// 复选框和单选框
	--el-checkbox-width: 16px; // 复选框宽度
	--el-checkbox-height: 16px; // 复选框高度
	--el-radio-width: 16px; // 单选框宽度
	--el-radio-height: 16px; // 单选框高度
	--el-checkbox-radio-border-width: 1px; // 复选框和单选框边框宽度
	--el-checkbox-radio-border-color: --el-color-gray-400; // 复选框和单选框边框颜色
	--el-checkbox-background-color: --el-color-white; // 复选框背景色
	--el-checkbox-checked-icon-color: --el-color-primary; // 复选框选中状态图标颜色
	--el-checkbox-disabled-opacity: 0.4; // 复选框禁用状态透明度
	--el-radio-background-color: --el-color-white; // 单选框背景色
	--el-radio-checked-icon-color: --el-color-primary; // 单选框选中状态图标颜色
	--el-radio-disabled-opacity: 0.4; // 单选框禁用状态透明度

	// 时间选择器
	--el-time-picker-panel-width: 256px; // 时间选择器面板宽度
	--el-time-picker-panel-height: 256px; // 时间选择器面板高度
	--el-time-picker-cell-width: 32px; // 时间选择器单元格宽度
	--el-time-picker-cell-height: 32px; // 时间选择器单元格高度
	--el-time-picker-cell-hover-background-color: rgba(--el-color-gray-400, 0.1); // 时间选择器单元格悬停背景色
	--el-time-picker-cell-active-background-color: rgba(--el-color-gray-400, 0.2); // 时间选择器单元格激活背景色
	--el-time-picker-header-height: 32px; // 时间选择器

	// /* Dropdown 组件 */
	--el-dropdown-menu-height: 300px; /* 下拉列表菜单的高度 */
	--el-dropdown-menu-padding: 0; /* 下拉列表菜单的内边距 */
	--el-dropdown-menu-background-color: #fff; /* 下拉列表菜单的背景颜色 */
	--el-dropdown-menu-border-radius: 10px; /* 下拉列表菜单的圆角半径 */
	--el-dropdown-menu-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 下拉列表菜单的阴影 */
	--el-dropdown-menu-item-height: 34px; /* 下拉列表菜单项的高度 */
	--el-dropdown-menu-item-color: #303133; /* 下拉列表菜单项的文字颜色 */
	--el-dropdown-menu-item-font-size: 14px; /* 下拉列表菜单项的字体大小 */
	--el-dropdown-menu-item-disabled-color: #dcdfe6; /* 下拉列表菜单项禁用状态下的文字颜色 */
	--el-dropdown-menu-item-hover-background-color: #f5f7fa; /* 鼠标悬停在下拉列表菜单项上时的背景颜色 */
	--el-dropdown-menu-item-active-background-color: #e2e6e9; /* 下拉列表菜单项被选中时的背景颜色 */
	--el-dropdown-menu-item-active-color: red; /* 下拉列表菜单项被选中时的文字颜色 */
	--el-dropdown-menu-item-active-font-weight: 500; /* 下拉列表菜单项被选中时的字体粗细 */
	--el-dropdown-menu-item-group-font-size: 14px; /* 下拉列表菜单项分组标题的字体大小 */
	--el-dropdown-menu-item-group-color: #909399; /* 下拉列表菜单项分组标题的文字颜色 */
	--el-dropdown-menu-item-group-background-color: #f2f6fc; /* 下拉列表菜单项分组标题的背景颜色 */
	--el-dropdown-menu-item-group-padding: 8px 20px; /* 下拉列表菜单项分组标题的内边距 */
}
